<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-input v-model="keywords" placeholder="请输入员工姓名进行搜索" prefix-icon="el-icon-search"
                  style="width: 350px;margin-right: 10px" @keydown.enter.native="initResigns"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="initResigns">搜索</el-button>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-table :data="resignations" stripe border style="width: 100%">
        <el-table-column prop="id" label="申请ID" width="80"></el-table-column>
        <el-table-column label="员工姓名" width="120">
          <template slot-scope="scope">
            {{ scope.row.employee ? scope.row.employee.name : '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="resignationType" label="离职类型" width="120"></el-table-column>
        <el-table-column label="预计离职日期" width="140">
          <template slot-scope="scope">
            {{ parseDate(scope.row.expectedDate) }}
          </template>
        </el-table-column>
        <el-table-column label="最后工作日" width="140">
          <template slot-scope="scope">
            {{ parseDate(scope.row.lastWorkingDay) }}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="离职原因"></el-table-column>
        <el-table-column prop="status" label="申请状态" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '待审核'" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === '已批准'" type="success">已批准</el-tag>
            <el-tag v-else-if="scope.row.status === '已拒绝'" type="danger">已拒绝</el-tag>
            <el-tag v-else>{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === '待审核'" size="mini" type="success" @click="approveResign(scope.row)">批准</el-button>
            <el-button v-if="scope.row.status === '待审核'" size="mini" type="danger" @click="rejectResign(scope.row)">拒绝</el-button>
            <el-button size="mini" type="primary" @click="viewDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end;margin-top: 10px">
        <el-pagination
          background
          @current-change="currentChange"
          @size-change="sizeChange"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="total">
        </el-pagination>
      </div>
    </div>



    <el-dialog title="离职申请详情" :visible.sync="dialogVisible2" width="70%">
      <div v-if="currentResign" class="detail-container">
        <div class="detail-card">
          <table class="detail-table" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td width="15%" class="detail-label">申请ID</td>
                <td width="35%">{{ currentResign.id }}</td>
                <td width="15%" class="detail-label">员工姓名</td>
                <td width="35%">{{ currentResign.employee ? currentResign.employee.name : '无' }}</td>
              </tr>
              <tr>
                <td class="detail-label">员工工号</td>
                <td>{{ currentResign.employee ? currentResign.employee.workID : '无' }}</td>
                <td class="detail-label">所属部门</td>
                <td>{{ currentResign.employee && currentResign.employee.department ? currentResign.employee.department.name : '无' }}</td>
              </tr>
              <tr>
                <td class="detail-label">联系电话</td>
                <td>{{ currentResign.employee ? currentResign.employee.phone : '无' }}</td>
                <td class="detail-label">电子邮箱</td>
                <td>{{ currentResign.employee ? currentResign.employee.email : '无' }}</td>
              </tr>
              <tr>
                <td class="detail-label">离职类型</td>
                <td>{{ currentResign.resignationType }}</td>
                <td class="detail-label">申请状态</td>
                <td>
                  <el-tag v-if="currentResign.status === '待审核'" type="warning">待审核</el-tag>
                  <el-tag v-else-if="currentResign.status === '已批准'" type="success">已批准</el-tag>
                  <el-tag v-else-if="currentResign.status === '已拒绝'" type="danger">已拒绝</el-tag>
                  <el-tag v-else>{{ currentResign.status }}</el-tag>
                </td>
              </tr>
              <tr>
                <td class="detail-label">预计离职日期</td>
                <td>{{ parseDate(currentResign.expectedDate) }}</td>
                <td class="detail-label">最后工作日</td>
                <td>{{ parseDate(currentResign.lastWorkingDay) }}</td>
              </tr>
              <tr>
                <td class="detail-label">离职原因</td>
                <td colspan="3">{{ currentResign.reason }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">关闭</el-button>
        <el-button v-if="currentResign && currentResign.status === '待审核'" type="success" @click="approveResign(currentResign)">批准</el-button>
        <el-button v-if="currentResign && currentResign.status === '待审核'" type="danger" @click="rejectResign(currentResign)">拒绝</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "PerResignAudit",
  data() {
    return {
      resignations: [],
      keywords: '',
      total: 0,
      page: 1,
      size: 10,
      dialogVisible: false,
      dialogVisible2: false,
      currentResign: null,
      loading: false
    };
  },
  mounted() {
    this.initResigns();
  },
  methods: {
    parseDate(dateStr) {
      if (!dateStr) return '无';
      try {
        const date = new Date(dateStr);
        return date.toISOString().split('T')[0]; // 返回 YYYY-MM-DD 格式
      } catch (e) {
        console.error('日期解析错误:', e);
        return '无效日期';
      }
    },

    initResigns() {
      this.loading = true;
      this.getRequest('/resign/?page=' + this.page + '&size=' + this.size + '&keywords=' + this.keywords).then(resp => {
        this.loading = false;
        if (resp) {
          this.resignations = resp.data;
          this.total = resp.total;
        }

      });
    },

    currentChange(currentPage) {
      this.page = currentPage;
      this.initResigns();
    },

    sizeChange(currentSize) {
      this.size = currentSize;
      this.page = 1; // 重置为第一页
      this.initResigns();
    },

    viewDetails(resign) {
      this.currentResign = resign;
      this.dialogVisible2 = true;
    },

    approveResign(resign) {
      this.$confirm('确认批准该离职申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const updateData = {
          id: resign.id,
          status: '已批准'
        };
        this.putRequest('/resign/updateStatus', updateData).then(resp => {
          if (resp) {
            this.initResigns();
          } else {
            this.$message.error('操作失败');
          }
        });
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    },

    rejectResign(resign) {
      this.$confirm('确认拒绝该离职申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const updateData = {
          id: resign.id,
          status: '已拒绝'
        };

        this.putRequest('/resign/updateStatus', updateData).then(resp => {
          if (resp) {
            this.initResigns();
            this.dialogVisible2 = false;
          } else {
            this.$message.error('操作失败');
          }
        });
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    }
  }
};
</script>

<style scoped>
.el-descriptions {
  margin: 20px 0;
}

.detail-container {
  padding: 0 10px;
}

.detail-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table td {
  padding: 12px 10px;
  border: 1px solid #ebeef5;
  line-height: 20px;
}

.detail-label {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.el-row {
  margin-bottom: 15px;
}
</style>
